<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D气球射击游戏 - 完美世界电竞</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 开始界面 -->
    <div id="start-screen" class="screen">
        <div class="logo">
            <h1>3D气球射击游戏</h1>
            <p>完美世界电竞授权</p>
        </div>
        <button id="start-btn" class="btn primary">开始游戏</button>
        <button id="settings-btn" class="btn secondary">游戏设置</button>
    </div>

    <!-- 设置界面 -->
    <div id="settings-screen" class="screen">
        <h2>游戏设置</h2>
        <div class="settings-container">
            <div class="setting-item">
                <label for="difficulty">难度设置:</label>
                <select id="difficulty">
                    <option value="easy">简单</option>
                    <option value="normal" selected>普通</option>
                    <option value="hard">困难</option>
                    <option value="expert">专家</option>
                </select>
            </div>
            <div class="setting-item">
                <label for="crosshair-style">准心样式:</label>
                <select id="crosshair-style">
                    <option value="classic">经典</option>
                    <option value="dot">圆点</option>
                    <option value="dynamic">动态</option>
                </select>
            </div>
            <div class="setting-item">
                <label for="mouse-sensitivity">鼠标灵敏度:</label>
                <input type="range" id="mouse-sensitivity" min="0.1" max="5" step="0.1" value="1">
                <span id="mouse-sensitivity-value">1.0</span>
            </div>
            <div class="setting-item">
                <label for="api-key">API密钥:</label>
                <input type="text" id="api-key" placeholder="输入API密钥" value="sk-3fdfeb51e2a947049d95d390ac48870a">
            </div>
            <div class="setting-item">
                <label for="sound">音效开关:</label>
                <input type="checkbox" id="sound" checked>
            </div>
            <div class="setting-item">
                <label for="music">背景音乐:</label>
                <input type="checkbox" id="music" checked>
            </div>
        </div>
        <button id="back-to-start" class="btn secondary">返回</button>
    </div>

    <!-- 游戏界面 -->
    <div id="game-screen" class="screen">
        <!-- 顶部信息栏 -->
        <div class="game-header">
            <div class="timer">时间: <span id="time-left">60</span>秒</div>
            <div class="score">得分: <span id="current-score">0</span></div>
            <div class="accuracy">准确率: <span id="accuracy">0%</span></div>
        </div>

        <!-- 靶场区域 -->
        <div id="target-area" class="target-area">
            <!-- 目标将在这里动态生成 -->
        </div>

        <!-- 准心 -->
        <div id="crosshair" class="crosshair classic"></div>

        <!-- 暂停按钮 -->
        <button id="pause-btn" class="pause-btn">暂停</button>
    </div>

    <!-- 暂停界面 -->
    <div id="pause-screen" class="screen">
        <h2>游戏暂停</h2>
        <button id="resume-btn" class="btn primary">继续游戏</button>
        <button id="restart-btn" class="btn secondary">重新开始</button>
        <button id="quit-btn" class="btn secondary">退出游戏</button>
    </div>

    <!-- 结束界面 -->
    <div id="end-screen" class="screen">
        <h2>游戏结束</h2>
        <div class="results">
            <div class="result-item">
                <span class="label">最终得分:</span>
                <span id="final-score" class="value">0</span>
            </div>
            <div class="result-item">
                <span class="label">准确率:</span>
                <span id="final-accuracy" class="value">0%</span>
            </div>
            <div class="result-item">
                <span class="label">击中目标数:</span>
                <span id="targets-hit" class="value">0</span>
            </div>
            <div class="result-item">
                <span class="label">总射击次数:</span>
                <span id="total-shots" class="value">0</span>
            </div>
            <div class="result-item">
                <span class="label">平均反应时间:</span>
                <span id="avg-reaction-time" class="value">0ms</span>
            </div>
            <div class="result-item">
                <span class="label">API评分:</span>
                <span id="api-score" class="value">0</span>
            </div>
            <div class="rating">
                <span class="label">综合评级:</span>
                <span id="player-rating" class="value">新兵</span>
            </div>
        </div>
        <button id="play-again-btn" class="btn primary">再玩一次</button>
        <button id="back-to-menu-btn" class="btn secondary">返回菜单</button>
    </div>

    <!-- 样式设置 -->
    <style>
        /* 防止右键菜单 */
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        /* 禁用右键菜单 */
        body {
            overflow: hidden;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>

    <script src="game.js"></script>
</body>
</html>